<template>
  <a-layout id="components-layout-demo-custom-trigger"  class='h-100'>
    <!-- 左侧菜单 s -->
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo">融资交易系统</div>
      <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']"  :openKeys="openKeys"   @openChange="onOpenChange">
        <template v-for='(item,index) in  menudata'>
            <a-menu-item  :key="index"  v-if='!item.children'>
              <router-link  :to='item.to'>
                <a-icon  :type="item.icon" /><span>{{item.name}}</span>
              </router-link>
            </a-menu-item>
            <a-sub-menu :key="index"  v-if='item.children'>
              <span slot="title"><a-icon  :type="item.icon" /><span>{{item.name}}</span></span>
              <template v-for='(nav) in  item.children'>
                <a-menu-item  >
                  <router-link  :to='nav.to'>
                    <a-icon  :type="nav.icon" /><span>{{nav.name}}</span>
                  </router-link>
                </a-menu-item>
              </template>
            </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <!-- 左侧菜单 e -->
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <div  class='fr  h-100  header-right'>
          <span  class='right-index'>
            <a-badge :count="2"><a-icon type="bell" :style="{ fontSize: '16px',padding:'6px' }"/></a-badge>
          </span>  
          <span  class='right-index'><span><a-avatar style="backgroundColor:#87d068" icon="user"  size="small" />  系统管理员</span></span>
          <span  class='right-index'><a-icon type="global"   :style="{ fontSize: '16px'}" /></span>
        </div>
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      collapsed: false,
      openKeys:[],
      rootSubmenuKeys: [4],
      menudata:[
        {name:'工作台',icon:'home',to:'/project',children:[
            {name:'项目趋势',icon:'pie-chart',to:'/'},
            {name:'我的待办',icon:'compass',to:'/'},
        ]}, 
        {name:'项目管理',icon:'project',to:'/project'}, 
        {name:'订单管理',icon:'ordered-list',to:'/'},
        {name:'供应商管理',icon:'shopping-cart',to:'/'},
        {name:'进口商管理',icon:'shop',to:'/'},
        {name:'系统管理',icon:'appstore',to:'/',children:[
            {name:'用户管理',icon:'team',to:'/'},
            {name:'角色管理',icon:'user-add',to:'/'},
            {name:'区块链管理',icon:'branches',to:'/'},
        ]},
      ]
    }
  },
  methods:{
    // 多层sub-meun只显示一层
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;line-height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
  color:#fff;
}
.header-right .right-index {display: inline-block; padding:0 12px;height: 100%;cursor: pointer;}
.header-right .right-index:hover {background:rgba(0,0,0,.025)}
</style>
